<html>
  <head>
    <style></style>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>
      html,body { margin: 0; padding: 0; }
      .box canvas {
        border-right: 1px solid #aaaaaa40;
        border-bottom: 1px solid #aaaaaa40;
        background-image:
        linear-gradient(#aaaaaa40 1px, transparent 0),
        linear-gradient(90deg, #aaaaaa40 1px, transparent 0),
        linear-gradient(#aaa 1px, transparent 0),
        linear-gradient(90deg, #aaa 1px, transparent 0);
        background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
      }
      .list {
        width: 910px;
        overflow: hidden;
        border-top: 1px solid #aaaaaa;
        border-left: 1px solid #aaaaaa;
      }
      .box {
        width: 300;
        min-height: 220;
        float: left;
        border-right: 1px solid #aaaaaa;
        border-bottom: 1px solid #aaaaaa;
      }
      .box .title {
        text-align: center;
        font-size: 14px;
        color: #000;
        display: inline-block;
        height: 20px;
        line-height: 20px;
        width: 100%;
        font-family: monospace;
      }
      .box .text {
        text-align: center;
        font-size: 14px;
        font-weight: bolder;
        color: #000;
        display: inline-block;
        height: 16px;
        line-height: 16px;
        width: 100%;
        font-family: monospace;
      }
    </style>
  </head>
  <body>

    <div class="list">
      <div class="box" id="mount-1">
        <div class="title">Event: View</div>
      </div>
      <div class="box" id="mount-2">
        <div class="title">Event: Result</div>
      </div>
    </div>

    <script src="../../../packages/board/dist/index.global.js"></script>
    <script>
      var opts = {
        width: 300,
        height: 200,
        contextWidth: 500,
        contextHeight: 450,
        devicePixelRatio: 4,
        canScroll: true,
        scrollConfig: {
          color: '#666666',
          lineWidth: 8
        }
      }
      function drawBoard(board) {
        const ctx = board.getContext();

        // ctx.setFillStyle('#ffffff');
        // ctx.fillRect(0, 0, opts.contextWidth, opts.contextHeight);

        ctx.setFillStyle('#f0f0f0');
        ctx.fillRect(5, 5, 100, 60);

        ctx.setFillStyle('#cccccc');
        ctx.fillRect(40, 40, 100, 60);

        ctx.setFillStyle('#c0c0c0');
        ctx.fillRect(80, 80, 100, 60);

        ctx.setFillStyle('#e0e0e0');
        ctx.fillRect(130, 130, 100, 50);

        ctx.setFillStyle('#e0e0e0');
        ctx.fillRect(250 - 5, 250 - 5, 100, 50);

        ctx.setFillStyle('#c0c0c0');
        ctx.fillRect(300, 300, 100, 50);

        ctx.setFillStyle('#cccccc');
        ctx.fillRect(380, 380, 100, 50);

        ctx.setFillStyle('#000');
        ctx.fillRect(250 - 5, 225 - 5, 10, 10);
      }
    </script>

    <script type="module">
      import event from './../../../scripts/browser/event.js';
      (async function() {
        const { Board } = window.iDrawBoard; 
        const mount1 = document.querySelector('#mount-1');
        const mount2 = document.querySelector('#mount-2');
        const board = new Board(mount1, opts);

        function renderText(text) {
          const div = document.createElement('div');
          div.innerText = text;
          div.classList.add('text');
          mount2.appendChild(div);
        }

        const handleDoubleClick = (e) => {
          renderText(`doubleClick: x=${e.x}, y=${e.y}`);
        }
        const handleHover = (e) => {
          renderText(`hover: x=${e.x}, y=${e.y}`);
        }
        const handlePoint = (e) => {
          renderText(`point: x=${e.x}, y=${e.y}`);
        }
        const handleMove = (e) => {
          renderText(`move: x=${e.x}, y=${e.y}`);
        }
        const handleMoveStart = (e) => {
          renderText(`moveStart: x=${e.x}, y=${e.y}`);
        }
        const handleMoveEnd = (e) => {
          renderText(`moveEnd: x=${e.x}, y=${e.y}`);
        }
        const handleWheelX = (moveX) => {
          renderText(`wheelX: moveX=${moveX}`);
        }
        const handleWheelY = (moveY) => {
          renderText(`wheelY: moveY=${moveY}`);
        }

        board.on('hover', handleHover);
        board.on('point', handlePoint);
        board.on('move', handleMove);
        board.on('moveStart', handleMoveStart);
        board.on('moveEnd', handleMoveEnd);
        board.on('wheelX', handleWheelX);
        board.on('wheelY', handleWheelY);
        board.on('doubleClick', handleDoubleClick)

        drawBoard(board)
        board.draw();

        function delay(time) {
          return new Promise((resolve) => {
            resolve()
          }, time)
        }

        async function triggerEvent(clientX, clientY) {
          event.click({
            x: clientX,
            y: clientY,
          });
          await delay(10);
          event.click({
            x: clientX,
            y: clientY,
          });
          event.mouseMove({
            x: clientX,
            y: clientY,
          });
          event.mouseDown({
            x: clientX,
            y: clientY,
          });
          event.mouseUp({
            x: clientX,
            y: clientY,
          });
          event.wheelX(100, {
            clientX: clientX,
            clientY: clientY,
          });
          event.wheelY(125, {
            clientX: clientX,
            clientY: clientY,
          });
        }

        await delay(20);
        triggerEvent(120, 100);
        await delay(20);
        
        board.off('doubleClick', handleDoubleClick);
        board.off('hover', handleHover);
        board.off('point', handlePoint);
        board.off('move', handleMove);
        board.off('moveStart', handleMoveStart);
        board.off('moveEnd', handleMoveEnd);
        board.off('wheelX', handleWheelX);
        board.off('wheelY', handleWheelY);
        await delay(1000);
        triggerEvent(100, 80)
      })();
    </script>
  </body>
</html>